<section>
  <div class="clear-fix">
    <div class="upload-body">
      <d-multiple-upload #multipleupload [fileOptions]="fileOptions2" [uploadedFiles]="uploadedFiles2"
        [filePath]="'name'" [uploadOptions]="uploadOptions2" (successEvent)="onSuccess3($event)"
        (deleteUploadedFileEvent)="deleteUploadedFile3($event)" (errorEvent)="onError3($event)"
        [uploadedFilesRef]="uploadedFilesTemp" [preloadFilesRef]="preloadFilesTemp"
        [withoutBtn]="true">
      </d-multiple-upload>
    </div>
    <div class="upload-btn">
      <d-button [bsStyle]="'primary'" (click)="multipleupload.upload()">
        {{UPLOAD}}
      </d-button>
    </div>
  </div>
  <ng-template #uploadedFilesTemp let-uploadedFiles="uploadedFiles" let-deleteFile="deleteFile" let-filePath="filePath">
    <table class="table" *ngIf="uploadedFiles.length>0" [style.margin-bottom.px]="0">
      <tbody>
        <tr *ngFor="let uploadedFile of uploadedFiles;let index=index;">
          <td width="50%">
            <span>{{uploadedFile.name}}</span>
          </td>
          <td width="25%">
            <span>{{UPLOADED}}</span>
          </td>
          <td>
            <d-button icon="trash" bsStyle="primary" bsSize="xs" (click)="deleteFile(uploadedFile[filePath])">
              {{ DELETE }}
            </d-button>
          </td>
        </tr>
      </tbody>
    </table>
  </ng-template>
  <ng-template #preloadFilesTemp let-fileUploaders="fileUploaders" let-deleteFile="deleteFile"
    let-UploadStatus="UploadStatus">
    <table class="table" *ngIf="fileUploaders.length>0">
      <tr *ngFor="let fileUploader of fileUploaders;let index=index;">
        <td width="50%">
          <span>{{fileUploader.file.name}}</span>
        </td>
        <td width="25%">
          <span *ngIf="fileUploader.status===UploadStatus.preLoad">{{PRELOAD}}</span>
          <span *ngIf="fileUploader.status===UploadStatus.uploading">{{UPLOADING}}</span>
          <span *ngIf="fileUploader.status===UploadStatus.uploaded">{{UPLOADED}}</span>
          <span *ngIf="fileUploader.status===UploadStatus.failed">{{FAILED}}</span>
        </td>
        <td>
          <d-button icon="trash" bsStyle="primary" bsSize="xs" *ngIf="fileUploader.status!==UploadStatus.uploaded"
            [disabled]="fileUploader.status===UploadStatus.uploading" (click)="deleteFile(fileUploader.file)">
            {{ DELETE }}
          </d-button>
        </td>
      </tr>
    </table>
  </ng-template>
</section>
